<template>
  <div>
    <!-- 导航部分开始 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>质量管理</el-breadcrumb-item>
      <el-breadcrumb-item>常见缺陷</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 导航部分结束 -->
    <!--  搜索栏开始 -->
    <el-form style="margin-top: 15px;" :inline="true" :model="queryDefect" class="demo-form-inline">
      <el-form-item label="缺陷描述">
        <el-input v-model="queryDefect.defectName" placeholder="缺陷描述" clearable />
      </el-form-item>
      <el-form-item label="检测项类型">
        <el-select v-model="queryDefect.indexType" placeholder="检测项类型" clearable>
          <el-option label="尺寸" value="尺寸" />
          <el-option label="外观" value="外观" />
          <el-option label="重量" value="重量" />
          <el-option label="性能" value="性能" />
          <el-option label="成分" value="成分" />
        </el-select>
      </el-form-item>
      <el-form-item label="缺陷等级">
        <el-select v-model="queryDefect.defectLevel" placeholder="请选择缺陷等级">
          <el-option label="致命缺陷" value="致命缺陷" />
          <el-option label="严重缺陷" value="严重缺陷" />
          <el-option label="轻微缺陷" value="轻微缺陷" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="loadDefects">搜索</el-button>
      </el-form-item>
    </el-form>
    <!--  搜索栏结束 -->
    <!-- 工具栏开始 -->
    <div class="flex">
      <el-button title="新增常见缺陷" @click="this.addDefectDialogVisible = true" type="primary">
        <el-icon>
          <Plus />
        </el-icon>
      </el-button>
      <el-button @click="handlerEditDefects" title="编辑选中字典" type="primary">
        <el-icon>
          <EditPen />
        </el-icon>
      </el-button>
      <el-button @click="handlerDeleteDefects" title="删除选中字典" type="primary">
        <el-icon>
          <Delete />
        </el-icon>
      </el-button>
    </div>
    <!-- 工具栏结束 -->
    <!-- 表格 开始 -->
    <el-table
      ref="defectTable"
      :data="defects"
      max-height="800px"
      stripe="true"
      border="true"
      style="width: 90%;margin-top: 10px;"
    >
      <el-table-column align="center" type="selection" width="55" />
      <el-table-column align="center" label="缺陷描述" property="defectName" />
      <el-table-column align="center" label="缺陷编码" property="defectCode" />
      <el-table-column align="center" label="检测项类型" property="indexType">
        <template #default="scope">
          <el-link>{{ scope.row.indexType }}</el-link>
        </template>
      </el-table-column>

      <el-table-column align="center" label="缺陷等级" property="defectLevel">
        <template #default="scope">
          <el-link>{{ scope.row.defectLevel }}</el-link>
        </template>
      </el-table-column>

      <el-table-column width="150" align="center" label="操作">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
          <el-popconfirm
            confirm-button-text="是"
            cancel-button-text="点错了"
            @confirm="handleDelete(scope.row)"
            title="您是否要删除这行数据"
          >
            <template #reference>
              <el-button size="small" type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格 结束 -->
    <!-- 分页栏开始 -->
    <el-pagination
      style="margin-top: 15px;"
      :page-size="defectLimit"
      :pager-count="defectMaxPage"
      @current-change="changePage"
      background
      layout="prev, pager, next"
      :total="defectTotal"
    />
    <!-- 分页栏结束 -->

    <!-- 添加字典的弹窗窗体开始-->
    <el-dialog v-model="addDefectDialogVisible" title="添加常见缺陷" width="600" align-center>
      <!-- 添加缺陷的表单 -->
      <el-form label-width="100px" :model="newDefect" style="max-width: 460px">
        <el-form-item label="缺陷描述">
          <el-input v-model="newDefect.defectName" />
        </el-form-item>
        <el-form-item label="缺陷编码">
          <el-input v-model="newDefect.defectCode" />
        </el-form-item>

        <el-form-item label="检测项类型">
          <el-select v-model="newDefect.indexType" placeholder="检测项类型">
            <el-option label="尺寸" value="尺寸" />
            <el-option label="外观" value="外观" />
            <el-option label="重量" value="重量" />
            <el-option label="性能" value="性能" />
            <el-option label="成分" value="成分" />
          </el-select>
        </el-form-item>

        <el-form-item label="缺陷等级">
          <el-select v-model="newDefect.defectLevel" placeholder="请选择缺陷等级">
            <el-option label="致命缺陷" value="致命缺陷" />
            <el-option label="严重缺陷" value="严重缺陷" />
            <el-option label="轻微缺陷" value="轻微缺陷" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelAddDefect">取消</el-button>
          <el-button type="primary" @click="doAddDefect">提交</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 添加用户的弹窗窗体结束-->

    <!--编辑常见缺陷的弹窗窗体开始-->
    <el-dialog v-model="defectEditDrawer" title="添加常见缺陷" width="600" align-center>
      <!-- 编辑常见缺陷的表单 -->
      <el-form label-width="100px" :model="editDefect" style="max-width: 460px">
        <el-form-item label="缺陷描述">
          <el-input v-model="editDefect.defectName" />
        </el-form-item>
        <el-form-item label="缺陷编码">
          <el-input disabled v-model="editDefect.defectCode" />
        </el-form-item>

        <el-form-item label="检测项类型">
          <el-select v-model="editDefect.indexType" placeholder="检测项类型">
            <el-option label="尺寸" value="尺寸" />
            <el-option label="外观" value="外观" />
            <el-option label="重量" value="重量" />
            <el-option label="性能" value="性能" />
            <el-option label="成分" value="成分" />
          </el-select>
        </el-form-item>

        <el-form-item label="缺陷等级">
          <el-select v-model="editDefect.defectLevel" placeholder="请选择缺陷等级">
            <el-option label="致命缺陷" value="致命缺陷" />
            <el-option label="严重缺陷" value="严重缺陷" />
            <el-option label="轻微缺陷" value="轻微缺陷" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelEdit">取消</el-button>
          <el-button type="primary" @click="doDefectEdit">提交</el-button>
        </span>
      </template>
    </el-dialog>
    <!--编辑常见缺陷的弹窗窗体结束-->
  </div>
</template>

<script>
import defectRequest from "../../../api/defect-api.js";
import tools from "../../../util/tools.js";

export default {
  data() {
    return {
      queryDefect: {}, //封装查询缺陷条件的对象
      defects: [], // 字典数据列表
      defectCurrPage: 1, // 字典分页的当前页码
      defectLimit: 5, // 字典分页的每页大小
      defectTotal: 0, // 字典列表的总条数
      defectMaxPage: 1, // 字典列表的最大页码

      // 新增常见缺陷信息相关属性

      newDefect: {}, //封装新增的常见缺陷信息

      currDefect: {}, // 保存正在操作的常见缺陷信息
      addDefectDialogVisible: false, //添加常见缺陷信息的弹窗标志
      editDefect: {}, //封装编辑的缺陷信息
      defectEditDrawer: false //行修改常见缺陷信息的弹窗标志
    };
  },
  methods: {
    /**
     * 取消编辑操作
     */
    cancelEdit() {
      //将编辑的用户制空
      this.editDefect = {};
      //关闭弹窗
      this.defectEditDrawer = false;
    },

    /**
     * 编辑缺陷的提交按钮事件
     */

    doDefectEdit() {
      // 数据校验：略
      // 提交数据
      defectRequest.update(this.editDefect, res => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: "编辑成功"
          });
          // 关闭窗体
          this.defectEditDrawer = false;
          // 重新加载数据
          this.loadDefects(); // 加载当前页
          this.editDefect = {}; //制空
        } else if (res.code == 300) {
          this.$message({
            type: "warning",
            message: "缺陷描述重复"
          });
        } else {
          this.$message({
            type: "error",
            message: "编辑失败"
          });
        }
      });
    },
    /**
     * 新增字典的提交按钮事件
     */
    doAddDefect() {
      // 数据校验：略
      // 提交数据
      console.log(this.newDefect);
      defectRequest.save(this.newDefect, res => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: "保存成功"
          });
          // 关闭窗体
          this.cancelAddDefect();
          // 重新加载数据
          this.loadDefects(); // 加载当前页
        } else if (res.code == 300) {
          this.$message({
            type: "warning",
            message: res.msg
          });
        } else {
          this.$message({
            type: "error",
            message: "保存失败"
          });
        }
      });
    },
    /**
     * 取消新增缺陷信息的按钮事件
     */
    cancelAddDefect() {
      // 关闭窗体
      this.addDefectDialogVisible = false;
      // 清空newDict
      this.newDefect = {};
    },
    /**
     * 行删除事件
     * @param {} row
     */
    handleDelete(row) {
      defectRequest.delete(row.defectCode, res => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: "删除成功"
          });
          this.loadDefects(); //更新页面
        } else {
          this.$message({
            type: "error",
            message: "删除失败"
          });
        }
      });
    },
    /**
     * 行编辑事件
     * @param {*} row
     */
    handleEdit(row) {
      console.log(row.defectCode);

      //通过defectCode加载到要编辑的缺陷信息
      defectRequest.get(row.defectCode, res => {
        //将查询的缺陷信息设置到editDefect中
        this.editDefect = res.data;
        console.log(this.editDefect);
        //显示抽屉弹窗
        this.defectEditDrawer = true;
      });
    },

    /**
     * 工具栏-选中删除按钮事件
     */
    handlerDeleteDefects() {
      //获取表格对象
      let table = this.$refs.defectTable;
      //通过API获取被选中的数据
      let selectionRows = table.getSelectionRows();
      if (selectionRows == undefined || selectionRows.length == 0) {
        this.$message({
          type: "info",
          message: "您没有选择任何行"
        });
      }
      //生成一个要删除的数组
      let deleteDefectCodes = [];
      selectionRows.forEach(defect => {
        deleteDefectCodes.push(defect.defectCode);
      });

      //调用API进行删除
      defectRequest.deletes(deleteDefectCodes, res => {
        this.$message({
          type: "success",
          message: "成功删除了" + res.msg + "条数据"
        });
        this.loadDefects();
      });
    },
    /**
     * 工具栏-选中编辑按钮事件
     */
    handlerEditDefects() {},
    /**
     * 字典列表的翻页函数
     * @param {} value  最新页码
     */
    changePage(value) {
      this.defectCurrPage = value;
      this.loadDefects();
    },

    /**
     * 加载常见缺陷数据
     */
    loadDefects() {
      defectRequest.list(
        this.defectCurrPage,
        this.defectLimit,
        this.queryDefect,
        res => {
          // 设置数据
          this.defects = res.data.list;
          this.defectTotal = res.data.total;
          this.defectMaxPage = res.data.pages;
        }
      );
    }
  },
  mounted() {
    // 默认加载常见缺陷数据列表

    this.loadDefects();
  }
};
</script>

<style>
</style>